<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="../../js/common.js"></script>
  <style>
    .user_detail {
      margin-bottom: 1%;
      width: 100%;
      height: auto;
    }

    .mr10 {
      margin-right: 10%;
    }

    .color_gray {
      background-color: #F5F5F5;
    }
  </style>
</head>

<body>
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <div style="margin: 3%"></div>
      <div class="user_detail">
        <label class="layui-form-label">昵称：</label>
        <div class="layui-input-block mr10">
          <input type="text" required disabled="disabled" id="nick_name" value="" class="layui-input color_gray">
        </div>
      </div>
      <div class="user_detail">
        <label class="layui-form-label">账号：</label>
        <div class="layui-input-block mr10">
          <input type="text" required disabled="disabled" id="name" value="" class="layui-input color_gray">
        </div>
      </div>
      <div class="user_detail">
        <label class="layui-form-label">手机：</label>
        <div class="layui-input-block mr10">
          <input type="text" required disabled="disabled" id="phone" value="" class="layui-input color_gray">
        </div>
      </div>
      <div class="user_detail">
        <label class="layui-form-label">邮件：</label>
        <div class="layui-input-block mr10">
          <input type="text" required disabled="disabled" id="email" value="" class="layui-input color_gray">
        </div>
      </div>
      <div class="user_detail">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-block mr10">
          <input type="text" required disabled="disabled" id="sex" value="" class="layui-input color_gray">
        </div>
      </div>
      <div class="layui-row">
        <!-- 下拉列表垂直展示 -->
        <!-- <div class="layui-col-md5">
          <div class="layui-row grid-demo">
            <div class="layui-col-md3">
              <div class="grid-demo grid-demo-bg1">
                <div class="user_detail">
                  <label class="layui-form-label">账号状态：</label>
                  <div class="layui-input-block" style="margin-right: 20%;">
                    <div class="layui-input-inline layui-form" lay-filter="group2">
                      <select class="seloption" name="groupid2" id="groupid2">
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
        <div class="layui-col-md5">
          <div class="layui-row grid-demo">
            <div class="layui-col-md3">
              <div class="grid-demo grid-demo-bg1">
                <div class="user_detail">
                  <label class="layui-form-label">账号权限：</label>
                  <div class="layui-input-inline layui-form" lay-filter="group">
                    <select class="seloption" name="groupid" id="groupid">
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      </div>
    </div>
  </form>

  <script src="../../layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript">

    /**
    * 获取query参数后面的属性
    * @param {String} name 需要获取的参数
    */
    var gtGetQueryString = function (name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      var url = window.location.href
      var search = url.substring(url.lastIndexOf('?') + 1)
      var r = search.match(reg)
      if (r != null) return decodeURI(r[2])
      return null
      window.gtGetQueryString = gtGetQueryString;
    };

    // layui.use
    layui.use(['dropdown', 'util', 'layer', 'table'], function () {
      var dropdown = layui.dropdown
        , util = layui.util
        , layer = layui.layer
        , table = layui.table
        , $ = layui.$
        , form = layui.form
        , element = layui.element;

      var uid = gtGetQueryString("uid"); // 获取 uid

      var user = {};
      $.ajax({
        type: 'get',
        url: '/api/READ/api/my/user/info/' + uid,
        async: false,
        headers: {
          token: localStorage.token
        },
        success: function (res) {
          //console.log(res)
          user = res.data;
        }
      });
      var typeName = user.typeName
      // console.log(typeName)

      // 填充表单 
      $('#nick_name')[0].value = user.nickName;
      $('#name')[0].value = user.userName;
      /*
        解析type
      */
      let type_name;
      $('#phone')[0].value = user.phone
      $('#email')[0].value = user.email
      let sex = user.sex;
      sex = sex == 2 ? "未填写" : (sex == 0 ? "男" : "女");

      $('#sex')[0].value = sex;


      //监听提交
      form.on('submit(formDemo)', function (data) {

        var userTypeDto = {
          uid: uid,
          type: data.field.groupid
        }

        $.ajax({
          url: "/api/READ/api/my/user/change/type",
          type: "POST",
          traditional: true,//这使json格式的字符不会被转码
          contentType: 'application/json; charset=UTF-8',
          datatype: "json", 
          headers: {
            token: localStorage.token
          },
          data: JSON.stringify(userTypeDto),
          success: function (res) {
            if (res.code === '200') {
              layer.alert('修改成功', {
                title: '提示'
              });
              
            } else {
              layer.alert(res.msg, {
                title: '提示'
              });
              return false;
            }
          }
        })
        return false;
      });

      // 下拉菜单 账号属性 获取数据 & 填充选项
      $.ajax({
        type: 'get',
        url: '/api/READ/api/my/dict/type/1/info',
        async: false,
        headers: {
          token: localStorage.token
        },
        success: function (res) {
          if (res.code == 200) {
            res = res.data;
            //console.log(res)
            var option = '';
            for (var i = 0; i < res.length; i++) {
              //循环获取返回值，并组装成html代码
              option += "<option value='" + res[i].type + "'>" + res[i].typeName + "</option>";
            }

            $("#groupid").html("");
            $("#groupid").append(option);

            var options = document.getElementById("groupid").options;
            var len = options.length;
            for (var i = 0; i < len; ++i) {
              if (typeName == options[i].innerText) {
                options[i].defaultSelected = true;
                options[i].selected = true;
                break;
              }
            }
            form.render('select', 'group');

          } else {
            var option = '<option value="0">请选择</option>';  //默认值
            layui.msg(res.msg)
          }
        }
      });

      //初演示
      dropdown.render({
        elem: '.demo1'
        , data: [{
          title: name
          , id: 100

        }]
        , click: function (obj) {
          layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
        }
      });
    });
  </script>
</body>

</html>